<template>
  <div class="bg" ref="scroll" @scroll="toHideMenu">
    <one-menu v-if="isMenu" @close="toHideMenu"></one-menu>
    <div class="up-video">
      <div class="up-video-bt iconfont icon-shangxiaqiehuan" @click="toMenu"></div>
      <p class="title">王银浩的<span> 小 秘 密 </span></p>
    </div>

    <div class="up-tabs"></div>
    <div class="main">
      <!-- <div class="main-title">
        <h1>功 能 列 表</h1>
      </div> -->
      <div class="main-main clear">
        <div class="main-bg" v-for="item in list" :key="item.pathId" @click="toPages(item.path)">
          <img src="~@/assets/index/7.png" />
          <div class="main-font">
            <p class="up">{{ item.label[0] }}</p>
            <p class="down">{{ item.label[1] }}</p>
          </div>
          <div class="main-box">
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="down"></div>
    <floor-nav></floor-nav>
  </div>
</template>

<script>
import oneMenu from "@/pages/components/catalogueMenu.vue";
import floorNav from "@/pages/components/floorNav.vue";
import mixins from "@/mixins/mixins.js";
export default {
  components: {
    oneMenu,
    floorNav,
  },
  mixins: [mixins],
  data() {
    return {
      isMenu: false,
      isScroll: false,
      isTimer: true,
      list: [
        {
          pathId: 0,
          title: "一个不要脸的自我介绍",
          label: ["介", "绍"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/nullPage",
        },
        {
          pathId: 1,
          title: "一堆没用的笔记",
          label: ["笔", "记"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/nullPage",
        },
        {
          pathId: 2,
          title: "一列惊人的计划",
          label: ["计", "划"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/nullPage",
        },
        {
          pathId: 3,
          title: "一些奇怪的知识",
          label: ["知", "识"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/nullPage",
        },
        {
          pathId: 4,
          title: "扫雷扫雷",
          label: ["扫", "雷"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "./html/扫雷.html",
        },
        {
          pathId: 5,
          title: "抽奖抽奖",
          label: ["抽", "奖"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "./html/chou_jiang/html/chou_jiang.html",
        },
        {
          pathId: 6,
          title: "变色变色",
          label: ["变", "色"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/Discoloration",
        },
        // {
        //     pathId:7,
        //     title:'拖拽拖拽',
        //     label:['拖','拽'],
        //     img:'https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375',
        //     path:'/dragAndDrop',
        // },
        {
          pathId: 8,
          title: "猜年龄/数字",
          label: ["猜", "数"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/guessAge",
        },
        {
          pathId: 9,
          title: "好像命令行",
          label: ["命", "令"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/likeCommand",
        },
        {
          pathId: 10,
          title: "BMI指数",
          label: ["指", "数"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/BMInumber",
        },
        {
          pathId: 12,
          title: "拖动多选",
          label: ["多", "选"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/dragCheck",
        },
        // {
        //     pathId:13,
        //     title:'树型结构',
        //     label:['树','型'],
        //     img:'https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375',
        //     path:'/treeStructure',
        // },
        {
          pathId: 14,
          title: "屏幕时钟",
          label: ["时", "钟"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/screenClock",
        },
        {
          pathId: 15,
          title: "电子木琴",
          label: ["木", "琴"],
          img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
          path: "/muQin",
        },
        // {
        //   pathId: 15,
        //   title: "聊天机器",
        //   label: ["聊", "天"],
        //   img: "https://img2.baidu.com/it/u=709919134,1896862070&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375",
        //   path: "/chat",
        // },
      ],
    };
  },
  mounted() {
    if (this._isMobile()) {
      console.log("手机端");
      this.$router.replace("/indexMini");
    } else {
      console.log("PC端");
      // this.$router.replace('/index');
      return;
    }
  },
  methods: {
    // 判断设备是移动端还是pc端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    // 点击菜单按钮，出来菜单
    toMenu() {
      this.isMenu = true;
      this.$nextTick((val) => {
        let isHeight = this.$refs.scroll.clientHeight;
        this.$refs.scroll.scrollTo(0, isHeight);
        this.toScroll(isHeight, 0, -40);
      });
    },

    // 判断菜单是否消失
    toHideMenu() {
      if (this.isScroll) {
        this.toScroll(0, this.$refs.scroll.clientHeight, 40);
      } else {
        return;
      }
    },

    // 卡片跳转页面
    toPages(path) {
      if (path[0] == "/") {
        console.log(path);
        this.$router.push(path);
      } else {
        window.open(path);
      }
    },

    // 封装函数
  },
};
</script>

<style lang="less" scoped>
// 让页面不显示滚动条
::-webkit-scrollbar {
  width: 0px;
}

.bg {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
}

.up-video {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #666;
  background: url("@/assets/wallpaper/zhizhuxia1.jpg") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-size: cover;

  .up-video-bt {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 60px;
  }

  .title {
    color: white;
    font-size: 100px;
    line-height: 100vh;
    text-align: center;
    vertical-align: middle;

    span {
      font-size: 120px;
      font-family: "JGFONT";
    }
  }
}

.up-tabs {}

.main {
  width: 100%;
  // height: 500px;
  // background-color: rgb(207, 255, 255);
  // background-color: rgb(212, 212, 212);
  background-image: url("@/assets/index/bg.png");
  background-repeat: repeat;
  background-size: 15%;

  .main-title {
    padding-top: 50px;

    h1 {
      width: 300px;
      margin: 0 auto;
      text-align: center;
      font-size: 40px;
      color: black;
      background-color: white;
      border-radius: 30px;

    }

    h1::after {
      margin: 0 auto;
      content: "";
      display: block;
      width: 100px;
      height: 8px;
      border-radius: 4px;
      background-color: black;
    }
  }

  .main-main {
    margin: 0 auto;
    padding: 50px 0;
    width: 90%;

    // background-color: rgb(145, 255, 109);
    .main-bg {
      position: relative;
      overflow: hidden;
      float: left;
      width: 20%;
      height: 500px;
      border-radius: 30px;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      margin: 30px calc(20% / 6);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .main-font {
        position: absolute;
        top: 0;
        left: 100%;
        padding: 10%;
        width: 80%;
        height: 80%;
        font-size: 170px;
        line-height: 225px;
        border-radius: 30px;
        z-index: 10;
        font-family: "JGFONT";
        color: #000;
        transition: all 0.3s ease-in-out;

        .up {
          text-align: left;
        }

        .down {
          text-align: right;
        }
      }

      .main-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        background-color: rgba(3, 3, 3, 0.5);
        z-index: 20;
        transition: all 0.3s ease-in-out;

        p {
          margin-top: 200px;
          text-align: center;
          font-size: 30px;
          color: white;
        }
      }
    }
  }

  .main-main>.main-bg:nth-child(4n + 1) {
    margin: 30px calc(20% / 6) 30px 0;
  }

  .main-main>.main-bg:nth-child(4n) {
    margin: 30px 0 30px calc(20% / 6);
  }
}

.down {}

// 这是css动画
/* 
ease-in 加速，
ease-out 减速，
ease-in-out 先加速后减速，
linear 匀速，
ease 与 ease-in-out 类似。 */
.main-bg:hover {
  box-shadow: 2px 2px 20px 3px rgba(0, 0, 0, 0.5);
}

.main-bg:hover .main-box {
  opacity: 0;
}

.main-bg:hover .main-font {
  transform: translateX(-100%);
}
</style>